<template>
	<view class="content">
		<view>
			<ynGallery 
			 :galleryheight="210" 
			  bkstart="#fff" 
			  bkend="#fff" 
			 :imgviewwidth="187" 
			 :imgviewheight="143" 
			 :showbadge="false"
			 :images="testimgs" 
			 @clickimg="onclickimg">
			</ynGallery>
			<text style="font-size: 15px;">
				
			</text>
		</view>

	</view>
</template>


<script>
	import ynGallery from '@/components/YnComponents/ynGallery/ynGallery.vue'

	export default {
		components: {
			ynGallery,
		},
		data() {
			return {
				sh: 0,
				Msg: {
						name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
				},
				// 画廊示例数据
				testimgs: [{
					    name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
					},
					{
						name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
					},
					{
						name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
					},
					{
						name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
					},
					{
						name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
					},{
						name: '御稻祥禾 五常大米',
						description: '晶莹剔透，口感香浓',
						practice: '159',
						url: "../../static/product/dami.jpg"
					}
				],
			}
		},
		
		
		onLoad(){
			this.setimgs();
		},
    

		methods: {
			onclickimg(imgviewobj) {
				if (imgviewobj.index != undefined)
					this.Msg = this.testimgs[imgviewobj.index];
			},
			setimgs() {
				var imgs=[];
				for (let i in this.testimgs) {									
					 let imgobj={
						  dec:'',                   //图像描述信息
						  badeg:'',                 //角标文字
						  badegcolor:'#000000',     //角标颜色
						  url:'',                   //图源  
						  dominant:''               //主色  
					};
					imgobj.url=this.testimgs[i].url;
					imgobj.dominant = this.retcolor(); //随机主色
					imgobj.dec = i; //描述  
					imgobj.badeg = i; //角标文字
					imgobj.badegcolor = (i % 2) == 0 ? 'red' : 'LimeGreen'; //角标颜色
					
					imgs.push(imgobj)
				}
				this.testimgs=imgs;
			},
			retcolor() {
				let color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
				return color;
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 100upx;
		width: 100upx;
		margin-top: 350upx;
		margin-bottom: 10upx;
		border-radius: 50upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>
